{% extends "html/html_home.html" %}

{% block content %}
<style>
body{font-family: Verdana, helvetica, arial, sans-serif;}
td{text-align:center;font-size:13px;}
td.rights {border-bottom:1px solid #000;border-right:1px solid #000;}
</style>

<br>
<form action="">
Select: <input type="hidden" name="v">
<input type="submit" name="t" value="Show 7 days">

</form>
<br>
<hr>
<br>

<div id="serviceChart" style="width:100%; height: 350px;"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="/media/js/highcharts.js"></script>
<script type="text/javascript" src="/media/js/exporting.js"></script>
<script type="text/javascript" src="/media/js/optionTree.js"></script>
<script>
$(function () {
        $('#serviceChart').highcharts({
            chart: {
                type: 'spline'
            },
            title: {
                text: '{{p}} - {{c}} Trends Performance'
            },
            subtitle: {
                text: 'Source: {{startTime}} ~ {{endTime}}'
            },
            xAxis: {
                categories: ['','','','','','','','',''],
                tickInterval: 10000,

            },
            yAxis: {
                title: {
                    text: ' '
                },
                labels: {
                    formatter: function() {
                        return this.value
                    },
                },
                min:0,

            },
            tooltip: {
                formatter: function() {
                var arData = new Array();
                var s = '';
                $.each(this.points, function(i, point) {
                    arData.push({"n":point.series.name,"v":point.y});
                });
                arData = arData.sort(function(a,b){
                        return b.v-a.v;

                });
                $.each(arData, function(x, y) {
                        s += y.n +': '+ y.v.toFixed(2) + '<br/>';
                });
                return s;
                 },
                crosshairs: true,
                shared: true
            },
            plotOptions: {
                spline: {
                    marker: {
                        radius: 3,
                        lineColor: '#666666',
                        lineWidth: 1
                    }
                }
            },
            series: [
                {%for w in widgets%}
                {
                name: '{%if w.server%}{{w.server.ip}}{%else%}{{w.title}}{%endif%}',
                marker: {
                    symbol: 'diamond'
                },
                data: {{w.line}}
            },
                {%endfor%}
                ]
        });
    });
















    var option_tree = {{data|safe}}
    var options = {
            choose:'Choose...',
            empty_value:'',
        };
    $('input[name=v]').optionTree(option_tree,options);
</script>


{% endblock %}

